<template>
  <el-dialog v-loading="saveing"
             :before-close="handleClose"
             title="个人信息"
             :visible="visible"
             :lock-scroll="true">
    <el-form :model="form"
             ref="form"
             label-width="100px"
             :rules="rules">
      <el-row type="flex">
        <el-col :span="12">
          <mk-form-item label="姓名"
                        required
                        :mk-le-length="50"
                        :mk-ge-length="2"
                        prop="realname">
            <el-input placeholder="请输入姓名"
                      v-model="form.realname"
                      size="small"></el-input>
          </mk-form-item>
        </el-col>
        <el-col :span="12">
          <mk-form-item label="手机号"
                        prop="phone">
            {{form.phone}}
          </mk-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="12">
          <mk-form-item label="新密码"
                        required
                        :mk-le-length="20"
                        :mk-ge-length="6"
                        prop="password">
            <el-input type="password"
                      placeholder="请输入新密码"
                      v-model="form.password"
                      size="small"></el-input>
          </mk-form-item>
        </el-col>
        <el-col :span="12">
          <mk-form-item label="确认新密码"
                        required
                        :mk-eq="getPwd"
                        prop="confirmpassword">
            <el-input type="password"
                      placeholder="请输入确认新密码"
                      v-model="form.confirmpassword"
                      size="small"></el-input>
          </mk-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="20">
          <mk-form-item label="短信验证码"
                        required
                        prop="msgcode">
            <el-input placeholder="请输入动态验证码"
                      v-model="form.msgcode"
                      size="small"
                      style="width:150px; height: 32px;line-height: 29px;"></el-input>
            <timer-btn @callback="getMsgCode"
                       @countfinish="countFinish"
                       :disabled="ui.validCodeLoading"></timer-btn>
          </mk-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <mk-button @click="handleClose">取消</mk-button>
      <mk-button :loading="saveing"
                 @click="save"
                 :type="2">保存</mk-button>
    </div>
  </el-dialog>

</template>

<script>
import { MkBase } from 'element-ui'
import area from 'element-ui/lib/datas/mk-area'
import cloneDeep from 'lodash.clonedeep'

export default {
  name: 'user-info',
  mixins: [MkBase],
  props: {
    visible: { type: Boolean, defalut: false }
  },
  data () {
    return {
      form: {
        userid: '',
        realname: '',
        phone: '',
        oldpassword: '',
        password: '',
        confirmpassword: '',
        msgcode: ''
      },
      saveing: false,
      ui: {
        area,
        validCodeLoading: false
      },
      props: {
        value: 'areacode', // 和显示关联起来的，不显示。value
        label: 'areaname' // 显示出来的内容。key
      },
      diablebtn: false,
      time: 10
    }
  },
  mounted () {
    this.form = cloneDeep(this.user)
  },
  watch: {
    visible: function (val) {
      if (!val) {
        this.form = {}
      } else {
        this.form = cloneDeep(this.user)
      }
    },
    'form.password': function () {
      if (this.validate) {
        this.$refs.form.validateField('confirmpassword')
      }
    }
  },
  methods: {
    countFinish () {
      this.ui.validCodeLoading = false
    },
    async getMsgCode () {
      this.ui.validCodeLoading = true
      await this.$get('/validateCode.sms')
    },
    handleClose () {
      this.$emit('close-window')
    },
    async save () {
      if (!this.validate) {
        let fn = this.$refs.form.validate
        let nodejs = false
        this.validate = this.$promise({ fn, nodejs })
      }
      if ((await this.validate()) === false) {
        return
      }
      let result = await this.$post('/user/updateinfobymscode.json', {
        user: { realname: this.form.realname, password: this.form.password },
        msgcode: this.form.msgcode
      })
      if (result) {
        this.user.realname = this.form.realname
        this.BIND_USER(this.user)
      }
      this.$message({ type: 'success', message: '修改成功' })
      this.handleClose()
    },
    getPwd () {
      return this.form.password
    }
  }
}
</script>
